<!-- 详情 -->
<template>
  <div class="drawer-layout">
    <el-drawer
      :title="detailTitle"
      :visible.sync="drawer"
      @closed="closedinvitation"
      size="85%"
      :wrapperClosable="false"
    >
      <div class="layout">
        <!-- <el-form label-position="left" :inline="true" size="small"> -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="活动基本配置" name="first">
            <el-form
              ref="basic"
              label-position="left"
              :inline="true"
              :model="basic"
              size="small"
              :rules="basicrules"
            >
              <div class="blockquote-box">基本信息</div>
              <div class="form-box">
                <el-form-item
                  label="活动名称"
                  prop="award_name"
                  class="form-box-item"
                >
                  <el-input
                    clearable
                    maxlength="20"
                    show-word-limit
                    placeholder="请输入活动名称"
                    v-model="basic.award_name"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item
                  label="活动时间"
                  prop="basicTime"
                  class="form-box-item"
                >
                  <el-date-picker
                    clearable
                    value-format="yyyy-MM-dd"
                    @change="basicTimeChange"
                    v-model="basicTime"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="请选择开始时间"
                    end-placeholder="请选择结束时间"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item
                  label="适用地区"
                  required
                  class="form-box-item"
                  prop="region"
                >
                  <el-select
                    v-model="basic.region"
                    multiple
                    collapse-tags
                    placeholder="请选择生效区域"
                  >
                    <el-option
                      v-for="item in regions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-form>
            <el-divider></el-divider>
            <div class="button-box">
              <el-button
                @click="basic_information('basic', 'second')"
                class="next-button"
                >下一步 <i class="el-icon-caret-right el-icon--right"></i
              ></el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="新用户奖励" name="second">
            <el-form
              label-position="left"
              :inline="true"
              :model="basic"
              size="small"
              :rules="basicrules"
            >
              <div class="blockquote-box">奖励规则</div>
              <div class="form-box">
                <el-form-item label="奖励类型" required class="form-box-item">
                  <el-checkbox-group
                    v-model="eventsForm.extraTimes"
                    size="small"
                  >
                    <el-checkbox
                      label="注册奖励"
                      name="extraTimes"
                    ></el-checkbox>
                    <el-checkbox
                      label="完成实名认证奖励"
                      name="extraTimes"
                    ></el-checkbox>
                    <el-checkbox
                      label="消费奖励"
                      name="extraTimes"
                    ></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <div>
                  <el-form-item required class="form-box-item">
                    积分转化卡领取后
                    <el-input
                      placeholder="天数"
                      v-model="eventsForm.totalPrizeRulesLimited"
                      style="width: 80px"
                    ></el-input>
                    内有效
                    <span style="font-size: 12px; color: #a3a3a3">
                      &nbsp;&nbsp;0为永久有效
                    </span>
                  </el-form-item>
                </div>
              </div>
              <div v-if="eventsForm.extraTimes.includes('注册奖励')">
                <div class="blockquote-box">注册奖励</div>
                <div class="form-box">
                  <el-form-item
                    label="奖励类型"
                    required
                    class="form-box-item"
                    style="margin-top: 20px"
                  >
                    <el-checkbox-group
                      v-model="eventsForm.rewardType"
                      size="small"
                    >
                      <el-checkbox label="积分" name="rewardType"></el-checkbox>
                      <el-checkbox
                        label="提货券"
                        name="rewardType"
                      ></el-checkbox>
                      <el-checkbox label="余额" name="rewardType"></el-checkbox>
                      <el-checkbox
                        label="积分转化卡"
                        name="rewardType"
                      ></el-checkbox>
                      <el-checkbox
                        label="优惠券"
                        name="rewardType"
                      ></el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                  <div>
                    <el-form-item
                      v-if="eventsForm.rewardType.includes('积分')"
                      label="赠送积分"
                      :rules="
                        eventsForm.rewardType.includes('积分')
                          ? [{ required: true, message: '请输入赠送积分数量' }]
                          : []
                      "
                      class="form-box-item"
                    >
                      <el-input
                        placeholder="请输入赠送积分数量"
                        v-model="eventsForm.totalPrizeRulesLimited"
                      >
                      </el-input>
                    </el-form-item>
                    <el-form-item
                      v-if="eventsForm.rewardType.includes('提货券')"
                      label="赠送提货券"
                      :rules="
                        eventsForm.rewardType.includes('提货券')
                          ? [
                              {
                                required: true,
                                message: '请输入赠送提货券数量',
                              },
                            ]
                          : []
                      "
                      class="form-box-item"
                    >
                      <el-input
                        placeholder="请输入赠送提货券数量"
                        v-model="eventsForm.totalPrizeRulesLimited"
                      >
                      </el-input>
                    </el-form-item>
                    <el-form-item
                      v-if="eventsForm.rewardType.includes('余额')"
                      label="赠送余额"
                      :rules="
                        eventsForm.rewardType.includes('余额')
                          ? [{ required: true, message: '请输入赠送余额' }]
                          : []
                      "
                      class="form-box-item"
                    >
                      <el-input
                        placeholder="请输入赠送余额"
                        v-model="eventsForm.totalPrizeRulesLimited"
                      >
                      </el-input>
                    </el-form-item>
                    <el-form-item
                      v-if="eventsForm.rewardType.includes('积分转化卡')"
                      label="积分转化率"
                      :rules="
                        eventsForm.rewardType.includes('积分转化卡')
                          ? [{ required: true, message: '请输入积分转化率' }]
                          : []
                      "
                      class="form-box-item"
                    >
                      <el-input
                        placeholder="请输入百分比"
                        v-model="eventsForm.totalPrizeRulesLimited"
                      >
                      </el-input>
                    </el-form-item>
                    <el-form-item
                      required
                      v-if="eventsForm.rewardType.includes('优惠券')"
                      label="赠送优惠券"
                      class="form-box-item"
                    >
                      <el-input
                        placeholder="请选择优惠券"
                        :disabled="true"
                        v-model="coupon.name"
                      >
                      </el-input>
                      <el-button
                        type="primary"
                        @click="addConfig('选择优惠券')"
                        style="margin-left: 20px"
                        >选择优惠券</el-button
                      >
                    </el-form-item>
                  </div>
                </div>
              </div>
              <div v-if="eventsForm.extraTimes.includes('完成实名认证奖励')">
                <div class="blockquote-box">实名认证奖励</div>
                <div class="form-box">
                  <el-form-item
                    label="奖励类型"
                    required
                    class="form-box-item"
                    style="margin-top: 20px"
                  >
                    <el-checkbox-group
                      v-model="eventsForm.rewardType"
                      size="small"
                    >
                      <el-checkbox label="积分" name="rewardType"></el-checkbox>
                      <el-checkbox
                        label="提货券"
                        name="rewardType"
                      ></el-checkbox>
                      <el-checkbox label="余额" name="rewardType"></el-checkbox>
                      <el-checkbox
                        label="积分转化卡"
                        name="rewardType"
                      ></el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                  <div>
                    <el-form-item
                      v-if="eventsForm.rewardType.includes('积分')"
                      label="赠送积分"
                      :rules="
                        eventsForm.rewardType.includes('积分')
                          ? [{ required: true, message: '请输入赠送积分数量' }]
                          : []
                      "
                      class="form-box-item"
                    >
                      <el-input
                        placeholder="请输入赠送积分数量"
                        v-model="eventsForm.totalPrizeRulesLimited"
                      >
                      </el-input>
                    </el-form-item>
                    <el-form-item
                      v-if="eventsForm.rewardType.includes('提货券')"
                      label="赠送提货券"
                      :rules="
                        eventsForm.rewardType.includes('积分')
                          ? [
                              {
                                required: true,
                                message: '请输入赠送提货券数量',
                              },
                            ]
                          : []
                      "
                      class="form-box-item"
                    >
                      <el-input
                        placeholder="请输入赠送提货券数量"
                        v-model="eventsForm.totalPrizeRulesLimited"
                      >
                      </el-input>
                    </el-form-item>
                    <el-form-item
                      v-if="eventsForm.rewardType.includes('余额')"
                      label="赠送余额"
                      :rules="
                        eventsForm.rewardType.includes('积分')
                          ? [{ required: true, message: '请输入赠送余额' }]
                          : []
                      "
                      class="form-box-item"
                    >
                      <el-input
                        placeholder="请输入赠送余额"
                        v-model="eventsForm.totalPrizeRulesLimited"
                      >
                      </el-input>
                    </el-form-item>
                    <el-form-item
                      v-if="eventsForm.rewardType.includes('积分转化卡')"
                      label="积分转化率"
                      :rules="
                        eventsForm.rewardType.includes('积分')
                          ? [{ required: true, message: '请输入积分转化率' }]
                          : []
                      "
                      class="form-box-item"
                    >
                      <el-input
                        placeholder="请输入百分比"
                        v-model="eventsForm.totalPrizeRulesLimited"
                      >
                      </el-input>
                    </el-form-item>
                  </div>
                </div>
              </div>
              <div v-if="eventsForm.extraTimes.includes('消费奖励')">
                <div class="blockquote-box">消费奖励</div>
                <div class="form-box">
                  <el-form-item label="配置条件" required class="form-box-item">
                    <el-button
                      type="primary"
                      style="height: 30px"
                      @click="addProductConfig('配置指定商品')"
                      >配置指定商品</el-button
                    >
                  </el-form-item>

                  <div
                    class="order-box"
                    v-for="(order, index) in eventsForm.orders"
                    :key="order.key"
                  >
                    <el-form-item
                      label="消费订单"
                      required
                      class="numbox form-box-item"
                    >
                      <el-radio-group v-model="order.consumptionOrder">
                        <el-radio label="1">固定单数</el-radio>
                        <el-radio label="2">订单区间</el-radio>
                      </el-radio-group>
                      <div
                        style="margin-left: 30px"
                        v-if="order.consumptionOrder == '1'"
                      >
                        第
                        <el-input-number
                          v-model="order.ordernum1"
                          :prop="'orders.' + index + '.ordernum1'"
                          controls-position="right"
                          v-if="
                            index !== 0
                              ? eventsForm.orders[index - 1].consumptionOrder ==
                                1
                              : order.consumptionOrder
                          "
                          :min="
                            index !== 0
                              ? eventsForm.orders[index - 1].ordernum1 + 1
                              : 1
                          "
                          @change="
                            (currentValue, oldValue) =>
                              numChange(currentValue, oldValue, order, index)
                          "
                        ></el-input-number>
                        <el-input-number
                          v-model="order.ordernum1"
                          :prop="'orders.' + index + '.ordernum1'"
                          controls-position="right"
                          v-else
                          :min="
                            index !== 0
                              ? eventsForm.orders[index - 1].ordernum3 + 1
                              : 1
                          "
                          @change="
                            (currentValue, oldValue) =>
                              numChange(currentValue, oldValue, order, index)
                          "
                        ></el-input-number>
                        单
                      </div>
                      <div style="margin-left: 30px" v-else>
                        第
                        <el-input-number
                          v-model="order.ordernum2"
                          :prop="'orders.' + index + '.ordernum2'"
                          controls-position="right"
                          v-if="
                            index !== 0
                              ? eventsForm.orders[index - 1].consumptionOrder ==
                                1
                              : order.consumptionOrder
                          "
                          :min="
                            index !== 0
                              ? eventsForm.orders[index - 1].ordernum1 + 1
                              : 1
                          "
                          @change="
                            (currentValue, oldValue) =>
                              numChange(currentValue, oldValue, order, index)
                          "
                        ></el-input-number>
                        <el-input-number
                          v-model="order.ordernum2"
                          :prop="'orders.' + index + '.ordernum2'"
                          controls-position="right"
                          v-else
                          :min="
                            index !== 0
                              ? eventsForm.orders[index - 1].ordernum3 + 1
                              : 1
                          "
                          @change="
                            (currentValue, oldValue) =>
                              numChange(currentValue, oldValue, order, index)
                          "
                        ></el-input-number>
                        单 —— 第
                        <el-input-number
                          v-model="order.ordernum3"
                          :prop="'orders.' + index + '.ordernum3'"
                          controls-position="right"
                          :min="order.ordernum2 + 1"
                          @change="
                            (currentValue, oldValue) =>
                              numChange(currentValue, oldValue, order, index)
                          "
                        ></el-input-number>
                        单
                      </div>
                      <div
                        style="margin-left: 50px"
                        v-if="index == eventsForm.orders.length - 1"
                      >
                        <el-button
                          type="primary"
                          icon="el-icon-plus"
                          circle
                          @click="addOrder"
                        ></el-button>
                        <el-button
                          icon="el-icon-minus"
                          circle
                          @click="removeOrder(order)"
                          v-if="index !== 0"
                        ></el-button>
                      </div>
                    </el-form-item>
                    <div class="form-box">
                      <el-form-item
                        label="奖励类型"
                        required
                        class="form-box-item"
                        style="margin-top: 20px"
                      >
                        <el-checkbox-group
                          v-model="order.inviterewardType"
                          size="small"
                        >
                          <el-checkbox
                            label="积分"
                            name="inviterewardType"
                          ></el-checkbox>
                          <el-checkbox
                            label="提货券"
                            name="inviterewardType"
                          ></el-checkbox>
                          <el-checkbox
                            label="余额"
                            name="inviterewardType"
                          ></el-checkbox>
                          <el-checkbox
                            label="积分转化卡"
                            name="inviterewardType"
                          ></el-checkbox>
                        </el-checkbox-group>
                      </el-form-item>
                      <div>
                        <el-form-item
                          v-if="order.inviterewardType.includes('积分')"
                          label="赠送积分"
                          :rules="
                            order.inviterewardType.includes('积分')
                              ? [
                                  {
                                    required: true,
                                    message: '请输入赠送积分数量',
                                  },
                                ]
                              : []
                          "
                          class="form-box-item"
                        >
                          <el-input
                            placeholder="请输入赠送积分数量"
                            v-model="order.invitepoints"
                          >
                          </el-input>
                        </el-form-item>
                        <el-form-item
                          v-if="order.inviterewardType.includes('提货券')"
                          label="赠送提货券"
                          :rules="
                            order.inviterewardType.includes('积分')
                              ? [
                                  {
                                    required: true,
                                    message: '请输入赠送提货券数量',
                                  },
                                ]
                              : []
                          "
                          class="form-box-item"
                        >
                          <el-input
                            placeholder="请输入赠送提货券数量"
                            v-model="order.invitevouchers"
                          >
                          </el-input>
                        </el-form-item>
                        <el-form-item
                          v-if="order.inviterewardType.includes('余额')"
                          label="赠送余额"
                          :rules="
                            order.inviterewardType.includes('积分')
                              ? [{ required: true, message: '请输入赠送余额' }]
                              : []
                          "
                          class="form-box-item"
                        >
                          <el-input
                            placeholder="请输入赠送余额"
                            v-model="order.invitebalance"
                          >
                          </el-input>
                        </el-form-item>
                        <el-form-item
                          v-if="order.inviterewardType.includes('积分转化卡')"
                          label="积分转化率"
                          :rules="
                            order.inviterewardType.includes('积分')
                              ? [
                                  {
                                    required: true,
                                    message: '请输入积分转化率',
                                  },
                                ]
                              : []
                          "
                          class="form-box-item"
                        >
                          <el-input
                            placeholder="请输入百分比"
                            v-model="order.invitetransform"
                          >
                          </el-input>
                        </el-form-item>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-form>
            <el-divider></el-divider>
            <div class="button-box">
              <el-button
                @click="activeName = 'first'"
                icon="el-icon-caret-left"
                class="next-button"
                >上一步</el-button
              >
              <el-button @click="activeName = 'third'" class="next-button"
                >下一步 <i class="el-icon-caret-right el-icon--right"></i
              ></el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="活动说明" name="third">
            <el-form
              label-position="left"
              :inline="true"
              :model="basic"
              size="small"
              :rules="basicrules"
            >
              <div class="blockquote-box">活动简介&规则说明</div>
              <div class="form-box">
                <el-form-item label="活动简介" required class="form-box-item">
                  <el-input
                    type="textarea"
                    style="width: 727px"
                    :rows="5"
                    placeholder="请输入内容"
                    v-model="eventsForm.intro"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item label="规则说明" required class="form-box-item">
                  <tinymce-editor v-model="eventsForm.content" width="100%" />
                </el-form-item>
              </div>
            </el-form>
            <el-divider></el-divider>
            <div class="button-box">
              <el-button
                @click="activeName = 'second'"
                icon="el-icon-caret-left"
                class="next-button"
                >上一步</el-button
              >
              <el-button class="next-button">保存</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
        <!-- </el-form> -->
      </div>
    </el-drawer>
    <!-- 配置抽屉 -->
    <config v-if="ifShowConfig" :ConfigTitle="ConfigTitle" />
    <productConfig
      v-if="ifShowProductConfig"
      :productConfigTitle="productConfigTitle"
    ></productConfig>
  </div>
</template>
<script>
// 引入
import config from "./config";
import productConfig from "../demo/productConfig";
import LogoUpload from "@/components/FileUpload";
import TinymceEditor from "@/components/Tinymce";
import {
  getgroupList,
  getTagCategoryAll,
  getgradeList,
  getRegionList,
} from "@/api/user/index";
import { rangeCanJoinUserList, rangeHasJoinUserList } from "@/api/index";
// import Template from '../raffle/template.vue';
export default {
  name: "detail",
  props: ["detailTitle"],
  components: {
    config,
    productConfig,
    LogoUpload,
    TinymceEditor,
  },

  data() {
    return {
      drawer: true,
      detailtitle: "",
      activeName: "first",
      status: [
        { name: "过期", id: -1 },
        { name: "开启", id: 1 },
        { name: "进行中", id: 2 },
        { name: "关闭", id: 3 },
      ],
      regions: [
        { name: "全国", id: "-1" },
        { name: "武汉", id: "1" },
        { name: "北京", id: "2" },
        { name: "郑州", id: "3" },
      ],
      groupingList: [], // 分组
      TagCategoryAll: [], // 标签
      gradeList: [], // 等级
      regionList: [], // 区域
      CanJoinUserList: [], // 满足条件的可参与用户列表
      eventsForm: {
        award_name: "", // 抽奖活动名称
        time: "",
        status: "", // 状态状态：-1过期 1开启 2进行中 3关闭
        totalPrizeRulesLimited: "",
        extraTimes: [], //额外次数
        region: [], //生效区域
        product: "",
        turntable: "6",
        prizepool: "默认奖池",
        prizeturntable: "1",
        content: "",
        intro: "",
        rewardObject: [],
        rewardType: [],
        orders: [
          {
            consumptionOrder: "1",
            ordernum1: null,
            ordernum2: null,
            ordernum3: null,
            inviterewardType: [],
            invitepoints: "",
            invitevouchers: "",
            invitebalance: "",
            invitetransform: "",
            beinvitedrewardType: [],
            beinvitedpoints: "",
            beinvitedvouchers: "",
            beinvitedbalance: "",
            beinvitedtransform: "",
          },
        ],
      },
      // 基本信息
      basic: {
        activity_name: "",
        award_name: "", // 抽奖活动名称
        start_time: "", // 开启时间
        end_time: "", // 结束时间
        status: 3, // 状态状态：-1过期 1开启 2进行中 3关闭
        user_lottery_num: 0, // 每人抽奖总次数 不填就是不限制
        user_days_lottery_num: 0, // 没人每天抽奖总次数 不填就是不限制
        is_use_cart_num: "", // 0不可使用会员卡赠送次数 >0可使用次数
        is_use_sign_num: "", // 0不可使用签到赠送次数 >0可使用次数
        region: [],
      },
      // 基本信息时间段
      basicTime: [],
      // 基本信息额外抽奖次数
      extraTimes: [],
      // 校验
      basicrules: {
        award_name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
              if (!value) {
                callback(new Error("请输入活动名称"));
              } else {
                if (req.test(value)) {
                  callback(new Error("活动名称中不能存在特殊字符"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
        basicTime: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.basicTime.length == 0) {
                return callback(new Error("请选择活动的时间段"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        status: [
          {
            required: true,
            validator: (rule, value, callback) => {
              callback();
            },
            trigger: "change",
          },
        ],
        user_lottery_num: [
          {
            required: false,
            validator: (rule, value, callback) => {
              let req = /\D/g;
              if (value == "" || value == 0) {
                return callback();
              }
              if (req.test(value)) {
                callback(new Error("只能为数字,且只能为整数"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        is_use_cart_num: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.extraTimes.includes("签到渠道")) {
                let req = /\D/g;
                if (value === "") {
                  callback(new Error("请输入额外签到次数"));
                } else {
                  if (req.test(value)) {
                    callback(new Error("额外签到次数只能为数字,且只能为整数"));
                  } else {
                    callback();
                  }
                }
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        is_use_sign_num: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.extraTimes.includes("会员卡渠道")) {
                let req = /\D/g;
                if (value === "") {
                  callback(new Error("请输入额外会员卡次数"));
                } else {
                  if (req.test(value)) {
                    callback(
                      new Error("额外会员卡次数只能为数字,且只能为整数")
                    );
                  } else {
                    callback();
                  }
                }
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
      // 适用范围
      range: {
        user_area: "",
        user_group: "",
        user_label: "",
        user_level: "",
        user_black: "", // 黑名单用户id
      },
      // 省市区
      region: [],
      grouping: [],
      label: [],
      grade: [],
      // 校验
      rangerules: {},
      rangeCanJoinUserSearch: {
        activity_type: 10001, // 活动类型：1=爱心助农;；2=秒杀；3=拼团；4=消费3天全返；5=送积分；6=积分转化提货券；7=好物推荐；8=邀请有礼；10001=抽奖
        remove_activity_id: "", // 需要排除的活动ID（修改活动，需要传当前活动ID）
        appoint_area_select: "", // 选择的地区ID（市ID，多个以,分开）
        appoint_level_select: "", // 选择的用户等级ID（多个以,分开）
        appoint_group_select: "", // 选择的用户分组ID（多个以,分开）
        appoint_tag_select: "", // 选择的用户标签ID（多个以,分开）
        user_black: "", // 黑名单用户ID（多个以,分开）
        page: 1,
        count: 10,
      }, //
      rangeCanJoinUserLoading: false, // 使用范围使用用户列表
      rangeCanJoinUsertotal: 0, // 使用范围使用用户列表总条数
      joinblackList: [], // 黑名单列表
      HasJoinUserList: [], // 重复用户列表
      rangeHasJoinUserTotal: 0, // 重复用户数
      //   适用范围传递的数据
      dataListConfig: [],
      loading: false,
      tablevalue: {
        all_user: 0,
        disabled_user: 0,
        repeat_user: 0,
        page: 1,
        count: 10,
        total: 3,
        dataList: [
          {
            id: 1,
            name: "qqq",
            region: "北京",
            group: "中年",
            tag: "男",
            image: "",
            status: "已参加",
          },
        ],
        minprize: "",
        maxprize: "",
      },
      dataList1: [
        {
          id: 1,
          name: "qqq",
          region: "北京",
          group: "中年",
          tag: "男",
          image: "",
          status: "已参加",
        },
        {
          id: 2,
          name: "qqq",
          region: "北京",
          group: "中年",
          tag: "男",
          image: "",
          status: "已参加",
        },
        {
          id: 3,
          name: "qqq",
          region: "北京",
          group: "中年",
          tag: "男",
          image: "",
          status: "已参加",
        },
      ],
      ifShowConfig: false,
      ConfigTitle: "",
      ifShowProductConfig: false,
      productConfigTitle: "",
      dialogFormVisible: false,
      form: {
        name: "",
        image: "",
      },
      images: [],
      dialogtitle: "",
      image: "",
      coupon: {
        id: "",
        name: "",
      },
    };
  },
  mounted() {
    const p1 = new Promise((resolve, reject) => {
      getgroupList().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.groupingList = res.data.list;
        resolve();
      });
    });
    const p2 = new Promise((resolve, reject) => {
      getTagCategoryAll().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.TagCategoryAll = res.data;
        resolve();
      });
    });
    const p3 = new Promise((resolve, reject) => {
      getgradeList().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.gradeList = res.data.list;
        resolve();
      });
    });
    const p4 = new Promise((resolve, reject) => {
      getRegionList({ level: 2 }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.regionList = res.data;
        resolve();
      });
    });
    const p5 = new Promise((resolve, reject) => {
      rangeCanJoinUserList(this.rangeCanJoinUserSearch).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.CanJoinUserList = res.data.list;
        this.rangeCanJoinUsertotal = res.data.total;
        resolve();
      });
    });
    const p6 = new Promise((resolve, reject) => {
      rangeHasJoinUserList({ activity_type: 10001 }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.HasJoinUserList = res.data.list;
        this.rangeHasJoinUserTotal = res.data.total;
        resolve();
      });
    });
    Promise.all([p1, p2, p3, p4, p5, p6])
      .then(() => {})
      .catch(() => {});
  },
  methods: {
    // 基本信息点击下一步调用
    basic_information(formName, activeName) {
      this.activeName = activeName;
      return;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.activeName = activeName;
        } else {
          return false;
        }
      });
    },
    // 选择活动日期之后直接赋值
    basicTimeChange(val) {
      if (val.length !== 0) {
        this.basic.start_time = val[0];
        this.basic.end_time = val[1];
      } else {
        this.basic.start_time = "";
        this.basic.end_time = "";
      }
    },
    // 文本框聚焦执行
    Focus(item, str) {
      if (item[str] == 0) {
        item[str] = "";
      }
      this.$forceUpdate();
    },
    // 文本框失焦执行
    Blur(item, str) {
      if (item[str] == "") {
        item[str] = 0;
        return;
      }
      if (Number(item[str])) {
        item[str] = Number(item[str]);
      }
      this.$forceUpdate();
    },
    getRangeCanJoinUserListWay() {
      this.rangeCanJoinUserLoading = true;
      rangeCanJoinUserList(this.rangeCanJoinUserSearch).then((res) => {
        this.rangeCanJoinUserLoading = false;
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          return;
        }
        this.CanJoinUserList = res.data.list;
        this.rangeCanJoinUsertotal = res.data.total;
      });
    },
    // 下拉框选择调用
    selectChangeWay(val, name) {
      this.range[name] = val.toString();
      if (name == "user_group") {
        this.rangeCanJoinUserSearch.appoint_group_select = val.toString();
      } else if (name == "user_level") {
        this.rangeCanJoinUserSearch.appoint_level_select = val.toString();
      } else if (name == "user_label") {
        this.rangeCanJoinUserSearch.appoint_tag_select = val.toString();
      }

      this.getRangeCanJoinUserListWay();
    },
    // 选择区域调用
    regionChangeWay(val) {
      console.log(JSON.stringify(val));
    },
    //tabs页面切换
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 关闭抽屉
    closedinvitation() {
      this.$parent.closedetail();
    },
    //打开抽屉
    addConfig(title) {
      this.ConfigTitle = title;
      this.ifShowConfig = true;
    },
    addProductConfig(title) {
      this.productConfigTitle = title;
      this.ifShowProductConfig = true;
    },
    //关闭子抽屉
    closeConfig(id, name) {
      if (id) {
        this.coupon.id = id;
        this.coupon.name = name;
      }
      this.ifShowConfig = false;
      // this.ifShowProductConfig = false;
    },
    //增加消费订单
    addOrder() {
      this.eventsForm.orders.push({
        consumptionOrder: "1",
        ordernum1: null,
        ordernum2: null,
        ordernum3: null,
        inviterewardType: [],
        invitepoints: "",
        invitevouchers: "",
        invitebalance: "",
        invitetransform: "",
        beinvitedrewardType: [],
        beinvitedpoints: "",
        beinvitedvouchers: "",
        beinvitedbalance: "",
        beinvitedtransform: "",
      });
    },
    //移除消费订单
    removeOrder(item) {
      var index = this.eventsForm.orders.indexOf(item);
      if (index !== -1) {
        this.eventsForm.orders.splice(index, 1);
      }
    },
    //订单数值改变
    numChange(currentValue, oldValue, order, index) {
      console.log("currentValue===", currentValue);
      console.log("oldValue===", oldValue);
      console.log("index===", index);
      var value = currentValue - oldValue;
      if (order.consumptionOrder == 1) {
        if (this.eventsForm.orders.length - 1 > index) {
          for (var i = index + 1; i < this.eventsForm.orders.length; i++) {
            if (this.eventsForm.orders[i].consumptionOrder == 1) {
              this.eventsForm.orders[i].ordernum1 += value;
            } else {
              this.eventsForm.orders[i].ordernum2 += value;
              this.eventsForm.orders[i].ordernum3 += value;
            }
          }
        }
      } else {
        if (currentValue == order.ordernum2) {
          order.ordernum3 += value;
        }
        if (this.eventsForm.orders.length - 1 > index) {
          for (var i = index + 1; i < this.eventsForm.orders.length; i++) {
            if (this.eventsForm.orders[i].consumptionOrder == 1) {
              this.eventsForm.orders[i].ordernum1 += value;
            } else {
              this.eventsForm.orders[i].ordernum2 += value;
              this.eventsForm.orders[i].ordernum3 += value;
            }
          }
        }
      }
    },
  },
};
</script>
<style lang="scss">
.drawer-layout {
  /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
  .el-drawer__body {
    overflow: auto;
  }

  /*2.隐藏滚动条，太丑了*/
  .el-drawer__container ::-webkit-scrollbar {
    display: none;
  }

  .el-drawer__header {
    background-color: #409eff;
    color: #ffffff;
    padding: 10px 20px;
    margin-bottom: 10px;
  }

  .el-tabs--card {
    height: calc(100vh - 110px);
    /* overflow-y: auto; */
  }

  // .el-tab-pane {
  //   height: calc(100vh - 110px);
  //   overflow-y: auto;
  // }

  //tabs
  .el-tabs__header {
    padding-left: 50px;
    margin: 0;
  }

  .el-tabs__item {
    padding: 0 40px;
  }

  .order-box {
    .el-tabs__nav-wrap::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      background-color: #f4f4f4;
      z-index: 1;
    }
  }

  .el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    z-index: 1;
  }

  .el-alert--warning.is-light .el-alert__description {
    color: #c77b04;
    font-size: 14px;
  }

  .form-box-item {
    .el-form-item__label {
      font-size: 14px;
      font-weight: 500;
      // width: 96px;
    }

    .el-input {
      width: 250px;
    }

    .el-upload-list--picture-card .el-upload-list__item {
      width: 100px;
      height: 100px;
    }

    .el-upload--picture-card {
      width: 100px;
      height: 100px;
      line-height: 110px;
    }
  }

  .numbox {
    .el-form-item__content {
      display: -webkit-inline-box;
    }

    .el-input {
      width: 130px;
    }
  }
}
</style>
<style lang="scss" scoped>
.blockquote-box {
  border-left: 4px solid #409eff;
  padding-left: 16px;
  margin: 16px 0;
  height: 40px;
  line-height: 40px;
  background: #fafafa;
  font-size: 16px;
}

.form-box {
  margin: 0 20px;

  .form-box-item {
    padding-bottom: 10px;
    padding-right: 20px;
    font-size: 12px;
    color: #4c4c4c;

    .form-tip {
      font-size: 12px;
      color: #4c4c4c;

      .tip-key {
        font-weight: bold;
        text-decoration: underline;
      }
    }

    .form-product {
      display: flex;
      font-size: 12px;
      color: #ee3737;
    }

    .Instructions {
      background: #f6f6f6;
      border-radius: 4px;
      padding: 10px;
    }
  }

  .table-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .table-top-left {
      display: flex;
      line-height: 30px;

      div {
        margin-right: 20px;
      }
    }

    .table-top-right {
      display: flex;

      div {
        margin-left: 20px;
      }
    }
  }

  .table-num {
    margin-left: 5px;
    background: #f0f0f0;
    width: 35px;
    border-radius: 5px;
  }

  .placard-box {
    .placard-title {
      font-size: 14px;
      color: #4893ff;
      width: 200px;
      text-align: center;
      margin-bottom: 10px;
    }

    .placard-tip {
      margin-top: 10px;
      width: 350px;
      color: #6c6c6c;
      line-height: 20px;
      font-size: 12px;
    }
  }

  .order-box {
    background: #f4f4f4;
    padding: 20px 10px;
    border-radius: 5px;
    margin-bottom: 20px;
  }
}

.button-box {
  margin-left: 30px;
  margin-bottom: 20px;

  .next-button {
    background-color: #eeeeee;
    color: #4c4c4c;
    height: 30px;
  }
}

.Instructions-important {
  color: #ee3737;
  font-weight: bold;
}
</style>